<!DOCTYPE html>
<!--
XWAMP2.0 UI Demo
@since 1.0 <2015-12-4> SoChishun <14502747@qq.com> Create.
@words 不再迷失！天澜，加油！
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="../../Public/Css/cssreset-min.css" rel="stylesheet" type="text/css"/>
        <link href="../../Public/Css/unsemantic/stylesheets/unsemantic-grid-responsive.min.css" rel="stylesheet" type="text/css"/>
        <link href="../../Public/JqPlugin/jquery-ui-1.11.4/start/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
        <link href="../../Public/Css/Font-Awesome-4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
        <link href="../../Public/JqPlugin/ui-layout-1.4.0/layout-default-min.css" rel="stylesheet" type="text/css"/>
        <link href="../../Public/JqPlugin/superfish-1.7.6/css/superfish.min.css" rel="stylesheet" type="text/css"/>
        <style type="text/css">
            body{font-size:12px; margin:0; color:#333;}
            a { text-decoration: none; color:#333;}    
            /* header */
            header {position: relative;z-index:	100000;}
            .ui-layout-north, .ui-layout-south { background-color:#00386F; color:#FFF;}
            .ui-layout-north a, .ui-layout-west a, .ui-layout-south a { color:#FFF;}
            .ui-layout-west { background-color:#376EA7; color:#FFF;}
            .logo { font-size:30px; font-weight: bold; font-family: 'Microsoft YaHei'}
            .sf-menu { position: absolute; right:0; top:11px; z-index:9999}
            .sf-menu li { background-color:#376EA7;}
            .sf-menu li li { background-color:#376EA7;}
            .sf-menu li a, .sf-menu .xsui-menu-header { color:#FFF; padding:.5em 1em}
            .sf-menu a { border-left:1px solid #9AB6D2}
            .sf-menu .xsui-menu-header { background-color:#00386F; color:#CCC}
            .sf-menu li:hover, .sf-menu li.sfHover { background-color:#1C5589}
            .header-bar { border-top:1px solid #9AB6D2; background-color:#376EA7; width:100%; display:table;}
            .message-zone { text-align: right;}
            .message-zone li { display:inline-block; margin:2px 0 0 20px;}
            .message-zone li:first-child {margin:0}
            .message-zone i {margin-right:5px;}
            .message-zone a i { margin:0px;}
            .message-zone .xsui-icon-only { margin-left:10px;}
            /* /header */
            /* user-zone */     
            .user-zone fieldset {position: relative;}
            .user-zone legend { color:#FFF; font-size:13px; text-indent: 10px; padding:8px 0 8px 0;}
            .user-zone legend img { width:16px; height:16px; vertical-align: text-bottom;}
            .user-zone legend a { margin-left:5px;}
            .user-zone .switch { position: absolute; right:10px; top:9px;}
            .user-zone .content {  line-height: 19px; padding:10px 5px;}
            .user-zone dt { font-weight: bold;}
            .user-zone a { margin-left:5px; color:#FFF;}
            .user-zone dd a:first-child{margin:0px;}
            .face img { width:60px; height:60px;}
            .user-zone .stat { display:table;}
            .user-zone .stat dt { clear:left; font-weight: normal;}
            .user-zone .stat dt, .user-zone .stat dd { float:left;}
            /* /user-zone */
            /* clock-zone */
            .clock-zone { margin-top:3px; border-top:solid 1px #9AB6D2;}
            #clock { padding:8px 0 8px 0; position: relative;}
            #clock span { padding-left: 10px; font-size:13px;}
            .clock-zone .switch { position:absolute; right:10px; top:8px; color:#FFF; }
            .clock-zone .switch i { color:#FFF; background:none;}
            .clock-zone em {color:#F2C689}
            .clock-zone .icon { background-color:#00386F; margin-left:5px; font-size:13px;}
            .fa-sun-o { color:#FF0;}
            .fa-moon-o {color:#FE0; padding:0px 2px;}
            #calendar .ui-datepicker { width:178px; padding:0}
            #calendar .ui-datepicker td span,#calendar .ui-datepicker td a { padding:1px;}
            #calendar .ui-widget-content {border:none; margin:0 0 5px 2px;}
            /* /clock-zone */
            /* aside-menu */
            .aside-menu legend { color:#FFF; font-weight: bold; font-size:13px; text-indent: 10px; padding:8px 0 8px 0; position: relative; width:100%;  border-top:1px solid #9AB6D2;}
            .aside-menu legend a { position: absolute; right:10px; top:8px;}
            .aside-menu ul { padding-bottom:15px;}
            .aside-menu li { padding:6px 10px 6px 25px; background-color:#376EA7;}
            .aside-menu li:hover { background-color: #215A93;}
            .aside-menu li i { margin-right:8px; }
            /* /aside-menu */
            /* notices-slider */
            .notices-slider{ position:relative;}
            .notices-slider a.abtn{height:20px;top:0;}
            .notices-slider .slider-content{ height:20px; line-height:20px; overflow:hidden; position:relative; width:335px; }
            .notices-slider .slider-content label{position:absolute;left:0;top:0; font-weight: bold;}
            .notices-slider .slider-content ul{position:absolute;left:30px;top:0;width:300px;}
            .notices-slider .slider-content li { width:300px; overflow:hidden;text-overflow:ellipsis; white-space:nowrap;}
            .notices-slider a.aleft{position:absolute; left:20px; top:1px}
            .notices-slider a.aright{position:absolute;right:0; top:1px}
            /* /notices-slider */
            .xsui-align-right { text-align: right;}
            .xsui-hide { display:none;}
            /* menu-tabs */
            .menu-tabs { background-color:#376EA7; color:#FFF; border-bottom:solid 1px #9AB6D2;}
            .menu-tabs li { display:inline-block; position: relative; padding:5px 50px 5px 15px; border-left:solid 1px #9AB6D2; margin-left:-2px;}
            .menu-tabs li.active, .menu-tabs li:hover { background-color:#215A93}
            .menu-tabs li a { color:#FFF;}
            .menu-tabs li i {font-weight: normal;}
            .menu-tabs li a:first-child i {margin-right: 5px;}
            .menu-tabs .xsui-btn-close { position: absolute; right:5px; top:1px;}
            .menu-tabs .xsui-btn-refresh { position: absolute; right:20px; top:1px;}
            /* /menu-tabs */
            /* footer */
            footer { padding:5px 10px; text-align:right;}
            .copyright { margin-right:10px;}
            /* /footer */
        </style>
    </head>
    <body>
        <script src="../../Public/JqPlugin/jquery-1.11.3.min.js" type="text/javascript"></script>
        <script src="../../Public/JqPlugin/jquery-ui-1.11.4/jquery-ui.min.js" type="text/javascript"></script>
        <script src="../../Public/JqPlugin/jquery-ui-1.11.4/i18n/datepicker-zh-CN.js" type="text/javascript"></script>
        <script src="../../Public/JqPlugin/ui-layout-1.4.0/jquery.layout-min.js" type="text/javascript"></script>
        <script src="../../Public/JqPlugin/superfish-1.7.6/js/superfish.min.js" type="text/javascript"></script>
        <script src="../../Public/JqPlugin/Xslider/js/Xslider.js" type="text/javascript"></script>
        <div class="ui-layout-north">
            <header>
                <!--logo-->
                <div class="logo grid-20"><h3>鑫优伟业后台管理系统</h3></div>
                <!--logo-->
                <!--menu-->
                <ul class="sf-menu">
                    <li><a href="#" onclick="return false;" class="icon-M1_XT">系统</a>
                        <ul>
                            <li class="xsui-menu-header">系统设置</li>
                            <li><a href="/xwam.php/XWAM/SiteConfig/site_config/addon/POrgSystem.html" data-id="3">网站设置</a></li><li><a href="/xwam.php/XWAM/VarConfig/var_config/addon/POrgSystem.html" data-id="4">变量配置</a></li><li class="xsui-menu-header">网站安全</li>
                            <li><a href="/xwam.php/XWAM/SiteBackup/index/addon/POrgSystem.html" data-id="6">数据备份</a></li><li><a href="/xwam.php/XWAM/SiteReduction/index/addon/POrgSystem.html" data-id="7">还原数据</a></li><li><a href="/xwam.php/XWAM/LogAnalysis/index/addon/POrgSystem.html" data-id="8">日志分析</a></li>                            </ul>
                    </li><li><a href="#" onclick="return false;" class="icon-M1_YH">用户</a>
                        <ul>
                            <li class="xsui-menu-header">用户管理</li>
                            <li><a href="/xwam.php/XWAM/User/user_list/addon/POrgUser.html" data-id="11">用户管理</a></li><li><a href="/xwam.php/XWAM/PM/pm_list/addon/POrgUser.html" data-id="12">站内信管理</a></li><li><a href="/xwam.php/XWAM/Role/role_list/addon/POrgUser.html" data-id="13">角色管理</a></li>                            </ul>
                    </li><li><a href="#" onclick="return false;" class="icon-M1_NR">内容</a>
                        <ul>
                            <li class="xsui-menu-header">内容管理</li>
                            <li><a href="/xwam.php/XWAM/Channels/channel_list/addon/POrgDocument.html" data-id="16">站点栏目</a></li><li><a href="/xwam.php/XWAM/Links/links_list/addon/POrgDocument.html" data-id="17">友情链接</a></li><li><a href="/xwam.php/XWAM/Advertising/advert_list/addon/POrgDocument.html" data-id="18">媒体广告</a></li>                            </ul>
                    </li>                
                </ul>
                <!--/menu-->
                <div class="header-bar">
                    <!--notices-slider-->
                    <div class="notices-slider grid-30 mobile-grid-65">
                        <div class="slider-content">
                            <label><i class="fa fa-bullhorn"></i></label>
                            <ul>
                                <li><a href="#" title="sdfa">日本通过防卫大纲 明确提出加强钓鱼岛等防卫日本通过防卫大纲 明确提出加强钓鱼岛等防卫日本通过防卫大纲 明确提出加强钓鱼岛等防卫日本通过防卫大纲 明确提出加强钓鱼岛等防卫</a></li>
                                <li><a href="#">温家宝：彻底解决中印边界问题需耐心和时间</a></li>
                                <li><a href="#">菲律宾称不会对人质事件中香港遇难者作出赔偿</a></li>
                                <li>11月份全国楼市再度量价齐涨 可能引发第三轮调控</li>
                                <li>山西巡警队长成黑老大敛财数亿 27套房被查封</li>
                            </ul>
                            <a class="aleft" href="#up"><i class="fa fa-caret-left"></i></a>
                            <a class="aright" href="#down"><i class="fa fa-caret-right"></i></a>
                        </div>
                    </div>
                    <!--/notices-slider-->
                    <!--message-->
                    <div class="message-zone grid-10 push-60">
                        <ul>
                            <li><i class="fa fa-envelope-o fw" title="短消息"></i><a href="#">0</a></li>
                            <li class="xsui-icon-only"><a href="/" target="_blank"><i class="fa fa-home" title="前往网站"></i></a></li>
                            <li class="xsui-icon-only"><a href="/" target="_blank"><i class="fa fa-question-circle" title="帮助"></i></a></li>
                        </ul>
                    </div>
                    <!--/message-->
                </div>
            </header>                
        </div>
        <div class="ui-layout-west">
            <!--userzone-->
            <div class="user-zone">
                <fieldset>
                    <legend><img src="#" alt="头像" /><a href="#">Admin</a><a href="#">[注销]</a></legend>
                    <a href="#" class="switch"><i class="fa fa-toggle-off"></i></a>
                    <div class="content xsui-hide">
                        <div class="face grid-40 mobile-grid-50"><img src="#" /></div>
                        <div class="info grid-60 mobile-grid-50">
                            <dl>
                                <dt>Admin</dt>
                                <dd>管理员</dd>
                                <dd><a href="#">[设置]</a><a href="#">[注销]</a></dd>
                            </dl>                    
                        </div>
                        <dl class="stat grid-100 mobile-grid-100">
                            <dt>部门：</dt>
                            <dd>未归属</dd>
                            <dt>上次登录：</dt>
                            <dd title="2015-12-04 13:30:20 登陆于 255.255.255.255">3天前</dd>
                        </dl>
                    </div>
                </fieldset>
            </div>
            <!--/userzone-->
            <!--clockzone-->
            <div class="clock-zone">                
                <div id="clock">                        
                    <span title="">0000-00-00 00:00:00</span>
                    <i class="icon fa fa-sun-o" title=""></i>
                    <a href="#" class="switch"><i class="fa fa-toggle-off"></i></a>
                </div>
                <div id="calendar" class="xsui-hide"></div>
            </div>
            <!--/timezone-->
            <!--asidemenu-->
            <div class="aside-menu">
                <fieldset>
                    <legend>菜单<a href="#"><i class="fa fa-toggle-on"></i></a></legend>
                    <ul>                        
                        <li><i class="fa fa-caret-right fw"></i><a href="#">三级菜单1</a></li>
                        <li><i class="fa fa-caret-right fw"></i><a href="#">三级菜单1</a></li>
                        <li><i class="fa fa-caret-right fw"></i><a href="#">三级菜单1</a></li>
                        <li><i class="fa fa-caret-right fw"></i><a href="#">三级菜单1</a></li>
                        <li><i class="fa fa-caret-right fw"></i><a href="#">三级菜单1</a></li>
                        <li><i class="fa fa-caret-right fw"></i><a href="#">三级菜单1</a></li>
                    </ul>
                </fieldset>
                <fieldset>
                    <legend>菜单<a href="#"><i class="fa fa-toggle-on"></i></a></legend>
                    <ul>                        
                        <li><i class="fa fa-caret-right fw"></i><a href="#">三级菜单1</a></li>
                        <li><i class="fa fa-caret-right fw"></i><a href="#">三级菜单1</a></li>
                        <li><i class="fa fa-caret-right fw"></i><a href="#">三级菜单1</a></li>
                        <li><i class="fa fa-caret-right fw"></i><a href="#">三级菜单1</a></li>
                        <li><i class="fa fa-caret-right fw"></i><a href="#">三级菜单1</a></li>
                        <li><i class="fa fa-caret-right fw"></i><a href="#">三级菜单1</a></li>
                    </ul>
                </fieldset>
                <fieldset>
                    <legend>菜单<a href="#"><i class="fa fa-toggle-on"></i></a></legend>
                    <ul>                        
                        <li><a href="#">三级菜单1</a></li>
                        <li><a href="#">三级菜单1</a></li>
                        <li><a href="#">三级菜单1</a></li>
                        <li><a href="#">三级菜单1</a></li>
                        <li><a href="#">三级菜单1</a></li>
                    </ul>
                </fieldset>
            </div>
            <!--/asidemenu-->
        </div>        
        <div class="ui-layout-center">
            <div class="menu-tabs">
                <ul>
                    <li class="active"><a href="#"><i class="fa fa-file-o fw"></i>菜单一</a><a href="#" class="xsui-btn-refresh"><i class="fa fa-refresh"></i></a><a href="#" class="xsui-btn-close"><i class="fa fa-close"></i></a></li>
                    <li><a href="#"><i class="fa fa-file-o fw"></i>菜单一</a><a href="#" class="xsui-btn-refresh"><i class="fa fa-refresh"></i></a><a href="#" class="xsui-btn-close"><i class="fa fa-close"></i></a></li>
                    <li><a href="#"><i class="fa fa-file-o fw"></i>菜单一</a><a href="#" class="xsui-btn-refresh"><i class="fa fa-refresh"></i></a><a href="#" class="xsui-btn-close"><i class="fa fa-close"></i></a></li>
                    <li><a href="#"><i class="fa fa-file-o fw"></i>菜单一</a><a href="#" class="xsui-btn-refresh"><i class="fa fa-refresh"></i></a><a href="#" class="xsui-btn-close"><i class="fa fa-close"></i></a></li>
                    <li><a href="#"><i class="fa fa-file-o fw"></i>菜单一</a><a href="#" class="xsui-btn-refresh"><i class="fa fa-refresh"></i></a><a href="#" class="xsui-btn-close"><i class="fa fa-close"></i></a></li>
                </ul>
            </div>
            <main class="grid-80">
                <table>
                    <tr><th>Col1</th><th>Col1</th><th>Col1</th><th>Col1</th><th>Col1</th><th>Col1</th></tr>
                    <tr><th>Col1</th><th>Col1</th><th>Col1</th><th>Col1</th><th>Col1</th><th>Col1</th></tr>
                    <tr><th>Col1</th><th>Col1</th><th>Col1</th><th>Col1</th><th>Col1</th><th>Col1</th></tr>
                    <tr><th>Col1</th><th>Col1</th><th>Col1</th><th>Col1</th><th>Col1</th><th>Col1</th></tr>
                    <tr><th>Col1</th><th>Col1</th><th>Col1</th><th>Col1</th><th>Col1</th><th>Col1</th></tr>
                </table>
            </main>
        </div>        
        <div class="ui-layout-south">
            <footer>
                <span class="copyright"><i class="fa fa-copyright fw"></i> 2015 <a href="/" target="_blank">XWAM</a></span>
                <span>Version：<a href="#">1.0.0</a></span>
            </footer>
        </div>
        <script type="text/javascript">
            // 免费字体资源:http://www.fontsquirrel.com 2015-12-4 SoChishun Added.
            var $layout;
            $(document).ready(function () {
                // 消息滚动播放插件 2015-12-4 SoChishun Added.
                // see:http://www.rjboy.cn/?p=708
                $(".notices-slider").Xslider({
                    unitdisplayed: 1,
                    numtoMove: 1,
                    loop: "cycle",
                    dir: "V",
                    autoscroll: 2500,
                    speed: 300
                });
                // 布局渲染 2015-12-3 SoChishun Added.
                // see:http://layout.jquery-dev.com/index.cfm
                $('body').layout({
                    applyDemoStyles: true,
                    spacing_open: 2, //边框的间隙
                    spacing_closed: 6, //关闭时边框的间隙
                    resizerTip: '可调整大小', //鼠标移到边框时，提示语
                    sliderTip: "显示/隐藏面板", //在某个Pane隐藏后，当鼠标移到边框上显示的提示语。
                    togglerTip_open: "关闭", //pane打开时，当鼠标移动到边框上按钮上，显示的提示语  
                    togglerTip_closed: "打开", //pane关闭时，当鼠标移动到边框上按钮上，显示的提示语  
                    togglerLength_open: 150, //pane打开时，边框按钮的长度  
                    togglerLength_closed: 300, //pane关闭时，边框按钮的长度,
                }).allowOverflow('north'); // 允许下拉菜单越过框架范围而不出现滚动条

                // 导航菜单下拉设置
                if ('undefined' !== typeof ($.fn.superfish)) {
                    $('ul.sf-menu').superfish({delay: 100});
                }
                // 侧边栏菜单展开和收起 2015-12-3 SoChishun Added.
                $('.aside-menu legend a').click(function () {
                    $(this).find('i').toggleClass('fa-toggle-on').toggleClass('fa-toggle-off').parent().parent().next().toggle();
                })
                $('.user-zone .switch').click(function () {
                    var $p = $(this).find('i').toggleClass('fa-toggle-on').toggleClass('fa-toggle-off').parent().parent();
                    $p.find('legend').toggle();
                    $p.find('.content').toggle();
                })
                $('.clock-zone .switch').click(function () {
                    $(this).find('i').toggleClass('fa-toggle-on').toggleClass('fa-toggle-off').parent().parent().next().toggle();
                })
                // 日历功能 2015-12-4 SoChishun Added.
                $('#calendar').datepicker({showWeek: true, autoSize: true});
                /**
                 * 时钟功能
                 * @returns {undefined}
                 * @since 1.0 <2015-12-4> SoChishun Added.
                 * @example <div id="clock"><span title="">----------------- ---:---:---</span><i class="fa fa-sun-o" title=""></i></div>
                 *      setInterval(clock, 1000);
                 */
                function clock() {
                    var d = new Date(); // 测试 new Date(2015,12,4,22,0,0)
                    var week = ['天', '一', '二', '三', '四', '五', '六'];
                    var odate = {'y': d.getFullYear(), 'm': d.getMonth(), 'd': d.getDay(), 'h': d.getHours(), 'i': d.getMinutes(), 's': d.getSeconds()};
                    var sdate = odate.y + '-' + (odate.m < 10 ? '0' + odate.m : odate.m) + '-' + (odate.d < 10 ? '0' + odate.d : odate.d);
                    var stime = sdate + ' ' + (odate.h < 10 ? '0' + odate.h : odate.h) + ':' + (odate.i < 10 ? '0' + odate.i : odate.i) + ':<em>' + (odate.s < 10 ? '0' + odate.s : odate.s) + '<em>';
                    var sdateinfo = sdate + ' 星期' + week[odate.d] + ' 第' + d.getWeekOfYear() + '周';
                    var swords = [[2, 5, '亲，您还在工作吗？熬夜伤身，赶紧休息哦~'], [5, 6, '您这么早就来啦，现在还是凌晨哦！'], [8, 12, '一日之计在于晨，好好加油哦！'], [12, 13, '享受一顿丰盛的午餐然后美美睡个午觉，为下午的工作补充能量~'], [14, 16, '激情工作中，燃烧吧，小宇宙！'], [17, 18, '准备下班啦，赶紧把手头的工作做个收尾哦~'], [20, 22, '亲，加班呀，辛苦啦...'], [22, 23, '夜深了，您还没休息吗，保重身体哦~']];
                    var sword = '';
                    for (var i in swords) {
                        if (odate.h >= swords[i][0] && odate.h < swords[i][1]) {
                            sword = swords[i][2];
                            break;
                        }
                    }
                    $('#clock').find('i').removeClass('fa-sun-o').removeClass('fa-moon-o').addClass(odate.h >= 18 ? 'fa-moon-o' : 'fa-sun-o').attr('title', sword);
                    $('#clock').find('span').html(stime).attr('title', sdateinfo);
                }
                setInterval(clock, 1000);
            });
            /**
             * 计算当前日期在本年度的周数
             * @param {Number} weekStart 每周开始于周几：周日：0，周一：1，周二：2 ...，默认为周日
             * @returns {Number}
             * @since 1.0 <2015-12-4> by http://blog.csdn.net/orain/article/details/7063273
             * @example
             (new Date(2015, 11, 4)).getWeekOfYear(); // 当前日期是本年度第几周
             (new Date(2015, 11, 31)).getWeekOfYear(); // 2015 年度有几周(注意：JS 中月的取值范围为 0~11)
             */
            Date.prototype.getWeekOfYear = function (weekStart) {
                weekStart = (weekStart || 0) - 0;
                if (isNaN(weekStart) || weekStart > 6)
                    weekStart = 0;

                var year = this.getFullYear();
                var firstDay = new Date(year, 0, 1);
                var firstWeekDays = 7 - firstDay.getDay() + weekStart;
                var dayOfYear = (((new Date(year, this.getMonth(), this.getDate())) - firstDay) / (24 * 3600 * 1000)) + 1;
                return Math.ceil((dayOfYear - firstWeekDays) / 7) + 1;
            }

            /**
             * 计算当前日期在本月份的周数
             * @param {Number} weekStart 每周开始于周几：周日：0，周一：1，周二：2 ...，默认为周日
             * @returns {Number}
             * @since 1.0 <2015-12-4> by http://blog.csdn.net/orain/article/details/7063273
             * @example
             (new Date(2015, 11, 31)).getWeekOfMonth(); // 当前日期是本月第几周(注意：JS 中月的取值范围为 0~11)
             (new Date(2015, 0, 31)).getWeekOfMonth(); // 2015年度1月有几周
             */
            Date.prototype.getWeekOfMonth = function (weekStart) {
                weekStart = (weekStart || 0) - 0;
                if (isNaN(weekStart) || weekStart > 6)
                    weekStart = 0;

                var dayOfWeek = this.getDay();
                var day = this.getDate();
                return Math.ceil((day - dayOfWeek - 1) / 7) + ((dayOfWeek >= weekStart) ? 1 : 0);
            }
        </script>
    </body>
</html>
